10 美团-一面

import { useState, useEffect, useCallback, useRef } from 'react';

// 定义 useRequest 的返回状态类型
interface UseRequestState<T> {
  data: T | null;
  error: Error | null;
  loading: boolean;
}

// 定义 useRequest 的返回结果，包含状态和操作函数
interface UseRequestReturn<T, P extends any[]> extends UseRequestState<T> {
  run: (...params: P) => Promise<T | void>;
  cancel: () => void;
}

function useRequest<T, P extends any[]>(
  service: (...args: P) => Promise<T>,
  options: { manual?: boolean } = {}
): UseRequestReturn<T, P> {
  const { manual = false } = options;

  // 管理请求的状态
  const [state, setState] = useState<UseRequestState<T>>({
    data: null,
    error: null,
    loading: !manual, // 如果是自动请求，初始 loading 为 true
  });

  // 使用 useRef 存储 service，防止闭包陷阱，始终保持最新的 service 引用
  const serviceRef = useRef(service);
  serviceRef.current = service;

  // 用于取消请求的 AbortController
  const abortControllerRef = useRef<AbortController | null>(null);

  // 核心请求执行函数
  const run = useCallback(async (...params: P) => {
    // 如果上一次请求还未结束，先取消它
    if (abortControllerRef.current) {
      abortControllerRef.current.abort();
    }
    
    const controller = new AbortController();
    abortControllerRef.current = controller;

    // 开始请求，设置 loading 为 true
    setState((prev) => ({ ...prev, loading: true, error: null }));

    try {
      const result = await serviceRef.current(...params);
      
      // 请求成功，更新 data 和 loading
      if (!controller.signal.aborted) {
        setState({ data: result, error: null, loading: false });
        return result;
      }
    } catch (error) {
      // 如果是主动取消的请求，不更新错误状态
      if ((error as any).name === 'AbortError') return;

      // 请求失败，更新 error 和 loading
      if (!controller.signal.aborted) {
        setState({ data: null, error: error as Error, loading: false });
        throw error;
      }
    } finally {
      // 清理当前的 controller 引用
      if (abortControllerRef.current === controller) {
        abortControllerRef.current = null;
      }
    }
  }, []);

  // 取消请求的方法
  const cancel = useCallback(() => {
    if (abortControllerRef.current) {
      abortControllerRef.current.abort();
      abortControllerRef.current = null;
    }
    setState((prev) => ({ ...prev, loading: false }));
  }, []);

  // 如果不是手动模式，组件挂载时自动发起请求
  useEffect(() => {
    if (!manual) {
      // 这里假设自动请求不带参数，如果有默认参数可以通过 options 传入
      run(); 
    }
    // 组件卸载时取消请求
    return () => {
      cancel();
    };
  }, [manual, run, cancel]);

  return { ...state, run, cancel };
}

export default useRequest;

import React from 'react';
import useRequest from './useRequest';

// 模拟一个异步请求函数
const fetchUserInfo = async (id: number) => {
  const res = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
  if (!res.ok) throw new Error('Network response was not ok');
  return res.json();
};

const UserInfo = () => {
  // 手动触发模式
  const { data, loading, error, run } = useRequest(fetchUserInfo, { manual: true });

  const handleFetch = () => {
    run(1).catch(err => console.log('请求出错:', err));
  };

  return (
    <div>
      <button onClick={handleFetch} disabled={loading}>
        {loading ? '加载中...' : '获取用户信息'}
      </button>
      
      {error && <p style={{ color: 'red' }}>请求失败: {error.message}</p>}
      
      {data && (
        <div>
          <h3>用户: {data.name}</h3>
          <p>邮箱: {data.email}</p>
        </div>
      )}
    </div>
  );
};

export default UserInfo;